<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="system">
            <home-bar :currentPage='currentPage'></home-bar>
            <div class="order-main system-main">
                <div class="main-position">
                    首页 > 质量管理
                    <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                </div>
                <div class="main-height"></div>
                <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <li class="active">质量管理</li>
                        </ul>
                    </div>
                    <div class="quality-main-mains">
                        <div class="quality-main-mains-top clear">
                            <div class="fl" @click="showSystemPopup2()">录入电子监管码</div>
                            <div class="fl" @click="showSystemPopup1()">筛选</div>
                            <div class="fl quality-main-mains-clear">清空筛选</div>
                        </div>
                        <div class="quality-main-table">
                            <table>
                                <tr>
                                    <th>序号</th>
                                    <th>药品名称</th>
                                    <th>药品分类</th>
                                    <th>药品编码</th>
                                    <th>处方药/非处方药</th>
                                    <th>药品规格</th>
                                    <th>品牌</th>
                                    <th>录入数量</th>
                                    <th>录入日期</th>
                                </tr>
                                <tr v-for="(item,index) in 10" :key="index" :class="{active:index%2==1}">
                                    <td>{{index}}</td>
                                    <td>999鼻炎灵</td>
                                    <td>药品>化学药品>抗生素类感染药品</td>
                                    <td>15662554422</td>
                                    <td>药乙OTC</td>
                                    <td>250ml/盒</td>
                                    <td>云南白药</td>
                                    <td>1000</td>
                                    <td>2018/05/04</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-show="show1 || show2">
            </div>
            <div class="systemPopup" v-show="show1">
                <div class="topTitle">
                    <span>筛选条件</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="quality-systemPopup1">
                    <div class="clear">
                        <div class="quality-systemPopup1-l fl">品牌</div>
                        <div class="quality-systemPopup1-r fl">
                            <el-select v-model="value1" placeholder="请选择品牌">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="clear">
                        <div class="quality-systemPopup1-l fl">关键词</div>
                        <div class="quality-systemPopup1-r fl">
                            <el-input v-model="value2" placeholder="请输入关键词"></el-input>
                        </div>
                    </div>
                    <div class="clear quality-systemPopup1-date">
                        <div class="quality-systemPopup1-l fl">录入日期</div>
                        <div class="quality-systemPopup1-r fl">
                            <div class="fl quality-systemPopup1-l-l">
                                <el-date-picker v-model="value3" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </div>
                            <div class="fl quality-systemPopup1-l-l">
                                <el-date-picker v-model="value4" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </div>
                    </div>
                    <div class="quality-systemPopup1-btn clear">
                        <div class="fl">确定</div>
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
            </div>
            <div class="systemPopup" v-show="show2">
                <div class="topTitle">
                    <span>录入电子监管码</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="quality-systemPopup2">
                    <div class="quality-systemPopup2-top clear">
                        <div class="fl quality-systemPopup2-top-l">药品编码</div>
                        <div class="fl quality-systemPopup2-top-m">
                            <el-select v-model="value1" placeholder="请选择生产批号">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="fl quality-systemPopup2-top-r">查询</div>
                    </div>
                    <div class="quality-systemPopup2-mi clear">
                        <div>
                            <div class="w50 fl">
                                <div class="fl">药品名称</div>
                                <div class="fl">感康感冒药</div>
                            </div>
                            <div class="w50 fl">
                                <div class="fl">药品编码</div>
                                <div class="fl">1256954455</div>
                            </div>
                        </div>
                        <div>
                            <div class="w50 fl">
                                <div class="fl">药品分类</div>
                                <div class="fl">药品 > 化学药品 > 感冒类药物</div>
                            </div>
                            <div class="w50 fl">
                                <div class="fl">品牌</div>
                                <div class="fl">云南白药</div>
                            </div>
                        </div>
                        <div>
                            <div class="w50 fl">
                                <div class="fl">生产厂家</div>
                                <div class="fl">中国制药</div>
                            </div>
                            <div class="w50 fl">
                                <div class="fl">批准文号</div>
                                <div class="fl">1256954455</div>
                            </div>
                        </div>
                        <div>
                            <div class="w50 fl">
                                <div class="fl">生产批号</div>
                                <div class="fl">75669856665</div>
                            </div>
                        </div>
                    </div>
                    <div class="quality-systemPopup2-mis clear">
                        <div class="fl">添加电子监管码</div>
                        <div class="fl">
                            <el-input placeholder="请输入电子监管码或使用扫码枪扫码"></el-input>
                        </div>
                        <div class="quality-systemPopup2-mis-btn fl">确定</div>
                    </div>
                    <div class="quality-systemPopup2-list">
                        <table>
                            <tr v-for="(item,index) in 10" :key="index" :class="{active:index%2==0}">
                                <td style="width:33%">{{index}}</td>
                                <td style="width:33%">551125555222</td>
                                <td style="width:33%">
                                    <span>删除</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="quality-systemPopup2-btn clear">
                        <div class="fr" @click="hideSystemPopup()">取消</div>
                        <div class="fr">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
import leftBar from "../public/left";
import homeBar from "../public/homebar";
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/quality",
      currentPage: {
        path: "/quality",
        name: "质量管理"
      },
      show1: false, // 筛选条件
      show2: false, // 录入电子监管码
      value1: "",
      options1: [
        {
          value: "三星",
          label: "三星"
        },
        {
          value: "苹果",
          label: "苹果"
        }
      ]
    };
  },
  methods: {
    showSystemPopup1() {
      this.show1 = true;
    },
    showSystemPopup2() {
      this.show2 = true;
    },
    hideSystemPopup() {
      this.show1 = false;
      this.show2 = false;
    }
  }
};
</script>

<style lang="less">
@import "quality.less";
</style>
